<template>
    <div class="store">
        <ul class="category">
            <li v-for="(category,index) in categorys" :key="index"
                class="category-item"
                :class="{'active':category.type===currentType}"
                @click="changeType(category.type)"
            >{{category.name}}
            </li>
        </ul>
        <div class="drug-list-wrapper">
            <drugList v-if="currentDrugs"
                      :drugs="currentDrugs"
                      @cartAdd="cartAdd"
            ></drugList>
            <div v-else class="drug-empty"><i class=" el-icon-loading"></i></div>
            <div class="pagination-wrapper">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="10"
                        :total="100"
                        :current-page.sync="currentPage"
                        @current-change="refreshDrugs">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import drugList from "@/components/drugList/drugList";
    import Vue from "vue";

    export default {
        data() {
            return {
                currentType: '0',
                currentPage: 1,
                categorys: []
            }
        },
        props: {
            drugs: {
                type: Object
            }
        },
        computed: {
            currentDrugs() {
                if(this.drugs[this.currentType]===undefined){
                    return;
                }
                return this.drugs[this.currentType][this.currentPage];
            }
        },
        methods: {
            refreshDrugs() {
                this.$emit('refreshDrugs', this.currentType, this.currentPage);
            },
            changeType(type) {
                this.currentType = type;
                this.currentPage = 1;
                this.refreshDrugs();
            },
            cartAdd(target) {
                this.$emit('cartAdd',target);
            },
        },
        created() {
            this.$http.get('/api/categorys').then((response) => {
                response = response.body;
                this.categorys = response.data;
                this.categorys.forEach((category) => {
                    Vue.set(this.drugs, category.type, {});
                });
                this.refreshDrugs();
            });
        },
        components: {
            drugList
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .category {
        display flex
        justify-content center
        width 800px
        height 50px
        margin 0 auto 20px

        .category-item {
            height 50px
            width 120px
            line-height 50px
            margin 5px
            border-radius 5px
            border 1px solid rgba(7, 17, 27, 0.1)
            text-align center
            font-size 14px
            cursor pointer

            &:hover {
                background rgba(7, 17, 27, 0.1)
            }

            &.active {
                background rgba(7, 17, 27, 0.1)
            }
        }
    }

    .drug-list-wrapper {
        width 1000px
        height 800px
        margin auto
        box-shadow 0 0 50px darkgray
        border-radius 20px
        margin-bottom 20px

        .drug-empty {
            height 740px
            text-align center
            padding-top 100px
            font-size 30px
            color #007bff
        }

        .pagination-wrapper {
            display flex
            justify-content center
        }
    }
</style>
